<template>
    <div class="bj">
      <Nav></Nav>
      <Nav2></Nav2>
      <div class="kuang">
        <div class="tiao">
          <p>您的当前位置:</p>
          <router-link to="/">
            <p>首页</p>
          </router-link>
          <p> > </p>
          <p>全部商品</p>
          <p> > </p>
          <p>苹果</p>
          <p> > </p>
          <p>阿克苏</p>
        </div>
      </div>
      <div class="kuang2">
        <div class="wenzi">
          <p>排序:</p>
          <p class="xl">销量</p>
          <p class="jg">价格
            <img src="/static/Ssjg/Ssjg-1.png" alt="">
            <img src="/static/Ssjg/Ssjg-2.png" alt="">
          </p>

          <p class="pf">评分最高</p>
        </div>
        <div class="wenzi2">
          <p>筛选:</p>
          <p>全国</p>
          <p>次日达</p>
        </div>
    </div>
      <div class="tupian1" v-for="item in arr">
        <div class="tup" v-for="item2 in item.arr2">
          <img :src="item2.url" alt="">
          <p class="wzi">{{item2.tit}}</p>
          <p class="wzi2">{{item2.tit2}}</p>
          <div class="jifen">
            <p><span class="ys">{{item2.tit3}}</span></p>
            <p class="sc">{{item2.price}}</p>
            <img src="/static/Ssjg/Ssjg-3.png" alt="">
          </div>
      </div>
      </div>

      <Footer></Footer>
    </div>
</template>

<script>
  import Nav from '../com/Nav';
  import Nav2 from '../com/Nav2';
  import Footer from '../com/Footer';
  // import Show4 from './Show4';
   export default {
        name: "Ssjg",
     data() {
       return {
         arr: [
           {
             arr2: [
               {'url': '/static/jfsc/jfsc-2.png', tit: '新西兰佳沛黄金奇异果', tit2: '果肉锦密,花蜜般的甘甜百吃不厌', tit3: '¥22.86', price: '¥40.00'},
               {'url': '/static/jfsc/jfsc-3.png', tit: '新西兰佳沛黄金奇异果', tit2: '果肉锦密,花蜜般的甘甜百吃不厌', tit3: '¥22.86', price: '¥20.0'},
               {'url': '/static/jfsc/jfsc-4.png', tit: '新西兰佳沛黄金奇异果', tit2: '果肉锦密,花蜜般的甘甜百吃不厌', tit3: '¥22.86', price: '¥22222.0'},
               {'url': '/static/jfsc/jfsc-5.png', tit: '新西兰佳沛黄金奇异果', tit2: '果肉锦密,花蜜般的甘甜百吃不厌', tit3: '¥22.86', price: '¥20.0'}
             ],
           },
           {
             arr2: [
               {'url': '/static/jfsc/jfsc-2.png', tit: '新西兰佳沛黄金奇异果', tit2: '果肉锦密,花蜜般的甘甜百吃不厌', tit3: '¥22.86', price: '¥40.00'},
               {'url': '/static/jfsc/jfsc-3.png', tit: '新西兰佳沛黄金奇异果', tit2: '果肉锦密,花蜜般的甘甜百吃不厌', tit3: '¥22.86', price: '¥20.0'},
               {'url': '/static/jfsc/jfsc-4.png', tit: '新西兰佳沛黄金奇异果', tit2: '果肉锦密,花蜜般的甘甜百吃不厌', tit3: '¥22.86', price: '¥20.0'},
               {'url': '/static/jfsc/jfsc-5.png', tit: '新西兰佳沛黄金奇异果', tit2: '果肉锦密,花蜜般的甘甜百吃不厌', tit3: '¥22.86', price: '¥20.0'}
             ],
           },
           {
             arr2: [
               {'url': '/static/jfsc/jfsc-2.png', tit: '新西兰佳沛黄金奇异果', tit2: '果肉锦密,花蜜般的甘甜百吃不厌', tit3: '¥22.86', price: '¥40.00'},
               {'url': '/static/jfsc/jfsc-3.png', tit: '新西兰佳沛黄金奇异果', tit2: '果肉锦密,花蜜般的甘甜百吃不厌', tit3: '¥22.86', price: '¥20.0'},
               {'url': '/static/jfsc/jfsc-4.png', tit: '新西兰佳沛黄金奇异果', tit2: '果肉锦密,花蜜般的甘甜百吃不厌', tit3: '¥22.86', price: '¥20.0'},
               {'url': '/static/jfsc/jfsc-5.png', tit: '新西兰佳沛黄金奇异果', tit2: '果肉锦密,花蜜般的甘甜百吃不厌', tit3: '¥22.86', price: '¥20.0'}
             ],
           },
         ],
       }
     },

      components:{
        Nav,
        Nav2,
        Footer
      }
    }
</script>

<style scoped>
  .bj{
    width: 100%;
    height: 100%;
    /*background: aqua;*/
  }
  .kuang{
    width: 1280px;
    height: 55px;
    margin: 0 auto;
    line-height: 55px;
    /*margin-top: 20px;*/
    /*margin-bottom: 20px;*/
    background: #f4f4f4;
  }
  .tiao{
    width: 345px;
    height: 14px;
    color: #8a8a8a;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
  }
  .kuang2{
    width: 1280px;
    height: 72px;
    display: flex;
    margin: auto;
    justify-content: space-between;
    align-items: center;
    /*background: gold;*/
  }
.wenzi{
  width: 422px;
  height: 73px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*background: aqua;*/
}
.wenzi2{
  width: 266px;
  height: 73px;
  display: flex;
  line-height: 73px;
  display: flex;
  justify-content: space-between;
  align-items: center;

}
  .wenzi p{
    width: 64px;
    height: 26px;
    border: 1px solid #ccc;
    line-height: 26px;
    text-align: center;
  }
  .wenzi2 p{
    width: 64px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border: 1px solid #ccc;
  }
  .wenzi p:nth-child(1){
    border: none;
  }

  .wenzi2 p:nth-child(1){
    border: none;
  }
  .wenzi p:nth-child(3){
    border: 1px solid #498e3d;
  }
  .wenzi2 p:nth-child(2){
    background: #498e3d;
  }
  .wenzi2 p:nth-child(3){
    background: #ccc;
  }
  .tupian1{
    width: 1280px;
    /*height: 433px;*/
    margin: auto;
    display: flex;
    justify-content: space-between;
  }
  .tup{
    width: 305px;
    height: 433px;
    border: 1px solid #ccc;
    text-align: center;
    margin-bottom: 20px;
    background: white;

  }
  .wzi{
    font-size: 18px;
    color: #333;
  }
  .wzi2{
    font-size: 14px;
    margin-top: 17px;
    color: #808080;
  }
  .jifen{
    display: flex;
    color: #808080;
    justify-content: space-around;
    margin-top: 21px;
  }
  .ys{
    color: #ff5757;
  }
  .sc{
    text-decoration: line-through;
  }
</style>
